<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <meta charset="UTF-8" />
    <link href="sample-css/page.css" rel="stylesheet" type="text/css" />
    
    <link href="css/contextmenu.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    .target
    {
            border:solid 1px #ffccee;   
            padding:5px;
            background-color:Blue;
            color:#fff;
            display:inline;
    }
    
    </style>
    <script src="src/jquery.js" type="text/javascript"></script>
    <script src="src/Plugins/jquery.contextmenu.js" type="text/javascript"></script>  
    
    <!--code highlighter file import-->
    <script src="../highlighter/scripts/shCore.js" type="text/javascript"></script>
    <script src="../highlighter/scripts/shBrushJScript.js" type="text/javascript"></script>
    <script src="../highlighter/scripts/shBrushCss.js" type="text/javascript"></script>  
    <link href="../highlighter/styles/shCore.css" rel="stylesheet" type="text/css" />
    <link href="../highlighter/styles/shThemeDefault.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript">
        SyntaxHighlighter.config.clipboardSwf = '../highlighter/scripts/clipboard.swf';
    	  SyntaxHighlighter.all();
	  </script>
    <!--end code highlighter-->
    
    
    <script type="text/javascript">
        $().ready(function() {
            var option = { width: 150, items: [
                            { text: "Item One", icon: "sample-css/wi0126-16.gif", alias: "1-1", action: menuAction },
                            { text: "Item Two", icon: "sample-css/ac0036-16.gif", alias: "1-2", action: menuAction },
                            { text: "Item Three", icon: "sample-css/ei0021-16.gif", alias: "1-3", action: menuAction },
                            { type: "splitLine" },
                            { text: "Group One", icon: "sample-css/wi0009-16.gif", alias: "1-4", type: "group", width: 170, items: [
	                            { text: "Group Three", icon: "sample-css/wi0054-16.gif", alias: "2-2", type: "group", width: 190, items: [
		                            { text: "Group3 Item One", icon: "sample-css/wi0062-16.gif", alias: "3-1", action: menuAction },
		                            { text: "Group3 Item Tow", icon: "sample-css/wi0063-16.gif", alias: "3-2", action: menuAction }
	                            ]
	                            },
	                            { text: "Group Two Item1", icon: "sample-css/wi0096-16.gif", alias: "2-1", action: menuAction },
	                            { text: "Group Two Item1", icon: "sample-css/wi0111-16.gif", alias: "2-3", action: menuAction },
	                            { text: "Group Two Item1", icon: "sample-css/wi0122-16.gif", alias: "2-4", action: menuAction }
                            ]
                            },
                            { type: "splitLine" },
                            { text: "Item Four", icon: "sample-css/wi0124-16.gif", alias: "1-5", action: menuAction },
                            { text: "Group Three", icon: "sample-css/wi0062-16.gif", alias: "1-6", type: "group", width: 180, items: [
	                            { text: "Item One", icon: "sample-css/wi0096-16.gif", alias: "4-1", action: menuAction },
	                            { text: "Item Two", icon: "sample-css/wi0122-16.gif", alias: "4-2", action: menuAction }
                            ]
                            }
                            ], onShow: applyrule,
                onContextMenu: BeforeContextMenu
            };
            function menuAction() {
                alert(this.data.alias);
            }
            function applyrule(menu) {               
                if (this.id == "target2") {
                    menu.applyrule({ name: "target2",
                        disable: true,
                        items: ["1-2", "2-3", "2-4", "1-6"]
                    });
                }
                else {
                    menu.applyrule({ name: "all",
                        disable: true,
                        items: []
                    });
                }
            }
            function BeforeContextMenu() {
                return this.id != "target3";
            }
            $("#target,#target2,#target3").contextmenu(option);
        });
    </script>
</head>
<body>
  <div style="padding:10px;"> 
      <h1>Context Menu Samples vs Code</h1>
      <fieldset>
        <legend>Simple Menu</legend>
        <div id="target"  class="target">Right Click Here</div>
        <p>Here is the configuration list of the content menu.</p>
        <pre class="brush:js;">
        var option = { width: 150, items: [
                { text: "Item One", icon: "sample-css/wi0126-16.gif", alias: "1-1", action: menuAction },
                { text: "Item Two", icon: "sample-css/ac0036-16.gif", alias: "1-2", action: menuAction },
                //this is normal menu item, menuAction will be called if this item is clicked on 
                { text: "Item Three", icon: "sample-css/ei0021-16.gif", alias: "1-3", action: menuAction },
                //this is a split line
                { type: "splitLine" },
                //this is a parent item, which has some sub-menu items
                { text: "Group One", icon: "sample-css/wi0009-16.gif", alias: "1-4", type: "group", width: 170, items: [
	                { text: "Group Three", icon: "sample-css/wi0054-16.gif", alias: "2-2", type: "group", width: 190, items: [
		                { text: "Group3 Item One", icon: "sample-css/wi0062-16.gif", alias: "3-1", action: menuAction },
		                { text: "Group3 Item Tow", icon: "sample-css/wi0063-16.gif", alias: "3-2", action: menuAction }
	                ]
	                },
	                { text: "Group Two Item1", icon: "sample-css/wi0096-16.gif", alias: "2-1", action: menuAction },
	                { text: "Group Two Item1", icon: "sample-css/wi0111-16.gif", alias: "2-3", action: menuAction },
	                { text: "Group Two Item1", icon: "sample-css/wi0122-16.gif", alias: "2-4", action: menuAction }
                ]
                },
                { type: "splitLine" },
                { text: "Item Four", icon: "sample-css/wi0124-16.gif", alias: "1-5", action: menuAction },
                { text: "Group Three", icon: "sample-css/wi0062-16.gif", alias: "1-6", type: "group", width: 180, items: [
	                { text: "Item One", icon: "sample-css/wi0096-16.gif", alias: "4-1", action: menuAction },
	                { text: "Item Two", icon: "sample-css/wi0122-16.gif", alias: "4-2", action: menuAction }
                ]
                }
                ]
        };
        $("#target").contextmenu(option); 
        </pre>
      </fieldset>
      
      <fieldset>
        <legend>Disabled Items</legend>
        <div id="target2"  class="target" style="left:600px;top:100px;"> Some Items Disabled</div>
        <pre class="brush:js;">
        var option = {
            ...
             onShow: applyrule,    
        }
        $("#target").contextmenu(option);      
        function applyrule(menu) {               
            menu.applyrule({ name: "target2",
              disable: true,
              items: ["1-2", "2-3", "2-4", "1-6"]
            });
        }
        </pre>
      </fieldset>
      
      <fieldset>
        <legend>Simple Date Picker</legend>
        <div id="target3"  class="target" style="left:400px;top:500px;">Whole Menu Disabled</div>
        <pre class="brush:js;">
        //return false to stop menu to pop up
        function BeforeContextMenu() {
                return this.id != "target3";
        }
        </pre>
      </fieldset>
  </div>    
</body>
</html>

